<!DOCTYPE html>
<html lang="ZH-cn">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Test</title>
  <link rel="stylesheet" href="./styles/default.css">
  <style>
    .nav {
      flex-shrink: 0;
      flex-grow: 1;
      border-left: solid var(--s-color-surface-variant) 1px;
    }

    .nav>.tag {
      display: flex;
      align-items: center;
      height: 40px;
      margin: 8px 0;
      color: var(--s-color-secondary);
      font-size: .75rem;
      padding: 0 16px;
    }

    .nav>.item {
      display: flex;
      align-items: center;
      height: 40px;
      color: var(--s-color-on-surface);
      padding: 0 24px;
      font-size: .875rem;
      border-radius: 28px;
      margin: 8px;
    }

    .nav>.checked {
      color: var(--s-color-primary);
      background: var(--s-color-secondary-container);
      color: var(--s-color-on-secondary-container);
    }

    .search {
      display: flex;
      align-items: center;
      background: var(--s-color-surface);
      height: 36px;
      border-radius: 20px;
      margin: 0 8px;
      max-width: 196px;
      width: 100%;
    }

    .search>s-icon {
      margin: 0 8px;
      color: var(--s-color-outline);
    }

    .search>input {
      background: none;
      outline: none;
      border: none;
      padding: 0;
      height: 100%;
      font-size: .875rem;
      width: 100%;
    }

    @media(max-width: 840px) {
      .search {
        max-width: none;
      }
    }
  </style>
</head>

<body>
  <s-page>
    <s-drawer>
      <s-scrollbar slot="start" style="display: flex;">
        <s-navigation-rail style="flex-shrink: 0;">
          <s-icon-button slot="menu" type="filled-tonal">
            <s-icon type="add"></s-icon>
          </s-icon-button>
          <s-navigation-rail-item>
            <s-icon slot="icon">
              <svg viewBox="0 -960 960 960">
                <path
                  d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
              </svg>
            </s-icon>
            <div slot="text">首页</div>
          </s-navigation-rail-item>
          <s-navigation-rail-item checked="true">
            <s-icon slot="icon">
              <svg viewBox="0 -960 960 960">
                <path
                  d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400h-66q-22 37-58.5 58.5T480-320q-43 0-79.5-21.5T342-400h-66q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z" />
              </svg>
            </s-icon>
            <div slot="text">概述</div>
            <s-badge slot="badge"></s-badge>
          </s-navigation-rail-item>
          <s-navigation-rail-item>
            <s-icon slot="icon">
              <svg viewBox="0 -960 960 960">
                <path
                  d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z" />
              </svg>
            </s-icon>
            <div slot="text">组件</div>
            <s-badge slot="badge">26</s-badge>
          </s-navigation-rail-item>
          <s-navigation-rail-item>
            <s-icon slot="icon">
              <svg viewBox="0 -960 960 960">
                <path
                  d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z" />
              </svg>
            </s-icon>
            <div slot="text">样式</div>
          </s-navigation-rail-item>
          <s-navigation-rail-item>
            <s-icon slot="icon">
              <svg viewBox="0 -960 960 960">
                <path
                  d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
              </svg>
            </s-icon>
            <div slot="text">关于</div>
          </s-navigation-rail-item>
          <div slot="end" style="display: flex;align-items: flex-end;justify-content: center;">
            <s-dialog>
              <s-icon-button slot="trigger" type="outlined" style="margin: 16px 0;">
                <s-icon type="dark_mode"></s-icon>
              </s-icon-button>
              <div slot="headline">
                Dialog
              </div>
              <p>
                ???
              </p>
            </s-dialog>
          </div>
        </s-navigation-rail>
        <s-scrollbar class="nav">
          <div class="tag">介绍</div>
          <s-ripple class="item checked">
            概述
          </s-ripple>
          <div class="tag">快速上手</div>
          <s-ripple class="item">
            安装
          </s-ripple>
          <s-ripple class="item">
            按需引入
          </s-ripple>
          <s-ripple class="item">
            静态方法
          </s-ripple>
          <s-ripple class="item">
            与其他库一起使用
          </s-ripple>
          <s-ripple class="item">
            支持的平台
          </s-ripple>
          <div class="tag">指南</div>
          <s-ripple class="item">
            TypeScript 支持
          </s-ripple>
          <s-ripple class="item">
            服务端渲染 SSR
          </s-ripple>
          <s-ripple class="item">
            更新日志
          </s-ripple>
        </s-scrollbar>
      </s-scrollbar>
      <div>
        <s-top-app-bar>
          <s-icon-button slot="navigation" onclick="document.querySelector('s-drawer').toggle()">
            <s-icon type="menu"></s-icon>
          </s-icon-button>

          <div style="display: flex;justify-content: flex-end;align-items: center;height: 100%;">
            <div class="search">
              <s-icon type="search"></s-icon>
              <input type="text" placeholder="搜索文档...">
            </div>
          </div>

          <s-tooltip slot="action">
            <s-icon-button slot="trigger" onclick="this.parentNode.nextElementSibling.show(this)">
              <s-icon>
                <svg viewBox="0 -960 960 960">
                  <path
                    d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z" />
                </svg>
              </s-icon>
            </s-icon-button>
            多语言
          </s-tooltip>
          <s-menu>
            <s-menu-item>
              中文
            </s-menu-item>
            <s-menu-item>
              English
            </s-menu-item>
            <s-menu-item>
              한국어
            </s-menu-item>
            <s-menu-item>
              ไทย ไทย
            </s-menu-item>
            <s-menu-item>
              日本語で
            </s-menu-item>
          </s-menu>
          <s-tooltip slot="action">
            <s-icon-button slot="trigger">
              <s-icon type="dark_mode"></s-icon>
            </s-icon-button>
            暗色模式
          </s-tooltip>
          <s-tooltip slot="action">
            <s-icon-button slot="trigger">
              <s-icon>
                <svg viewBox="0 0 1024 1024">
                  <path
                    d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z">
                  </path>
                </svg>
              </s-icon>
            </s-icon-button>
            Github
          </s-tooltip>
        </s-top-app-bar>
        <s-scrollbar>

        </s-scrollbar>
      </div>
    </s-drawer>
  </s-page>
  <script type="module" src="../dist/sober.min.js"></script>
</body>

</html>